<template>
  <div>
    <div class="swipe_container">
      <div class="swiper_head">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          :height="360"
        >
          <van-swipe-item>
            <img
              src="../../img/swipe1.jpg"
              alt=""
              height="360px"
              width="100%"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="../../img/swipe2.png"
              alt=""
              height="360px"
              width="100%"
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="../../img/swipe3.jpg"
              alt=""
              height="360px"
              width="100%"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="swiper_foot">
        <ul>
          <li>
            <img src="../../img/1.png" alt="" />
            <p>签到</p>
          </li>
          <li>
            <img src="../../img/2.png" alt="" />
            <p>礼券</p>
          </li>
          <li>
            <img src="../../img/3.png" alt="" />
            <p>砍价</p>
          </li>
          <li>
            <img src="../../img/4.png" alt="" />
            <p>专栏</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style scoped>
.swipe_container {
  width: 100%;
  height: 7.5rem;
  background-color: lemonchiffon;
  position: relative;
}
.swipe_head {
  width: 100%;
  height: 3.4rem;
}
.swipe_head img {
  width: 100%;
  height: 100%;
}
.swiper_foot {
  width: 100%;
  height: 2rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: white;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.swiper_foot>ul{
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.swiper_foot>ul>li{
    width: 20%;
    height: 100%;
    padding: 5px 5px;
    box-sizing: border-box;
   font-size: 1rem;
    margin:0 6px;
    text-align: center;

}
.swiper_foot>ul>li>img{
    width: 80%;
    height: 1rem;
}
.swiper_foot>ul>li>p{
  font-size: 0.4rem;
}
</style>